import React, {PropsWithChildren, useState} from 'react'

import {Cell, DatePicker, Form, } from "@nutui/nutui-react-taro";
import {convert, OffsetDateTime} from "@js-joda/core";
import {DATE_WITH_HOUR_MINUTE_FORMATER} from "../utils/Date";


export interface DatePickerFormItemProps extends PropsWithChildren {
    dateTime?: OffsetDateTime
    onChange: (value: OffsetDateTime) => void
    label?: string
}

const DatePickerFormItem: React.FC<DatePickerFormItemProps> = (props) => {
    const [showDateTimePicker, setShowDateTimePicker] = useState(false)
    return <>
        <Form.Item label={props.label} onClick={() => {
            setShowDateTimePicker(true)
        }}>
            <Cell
                style={{
                    padding: 0,
                    // @ts-ignore
                    '--nutui-cell-divider-border-bottom': '0',
                }}
                className="nutui-cell--clickable datepicker-cell"
                title={props.dateTime?.format(DATE_WITH_HOUR_MINUTE_FORMATER) ?? "请选择"}
            />
        </Form.Item>
        <DatePicker onCancel={() => {
            setShowDateTimePicker(false)
        }}
                    value={props.dateTime ? convert(props.dateTime.toLocalDateTime()).toDate() : undefined}
                    type={"datetime"} visible={showDateTimePicker} onConfirm={(_, value) => {
            let numbers = (value as string[]).map(it => parseInt(it));
            props.onChange(OffsetDateTime.of(numbers[0], numbers[1], numbers[2], numbers[3], numbers[4], 0, 0, OffsetDateTime.now().offset()))
            setShowDateTimePicker(false)
        }}/>
    </>
}

export default DatePickerFormItem


